<template>
  <div>
    <header>
      <van-icon name="arrow-left" size=".5rem" @click="$router.back()" />
      <van-search
        v-model="value"
        placeholder="全场50元起步"
        shape="round"
        style="width: 7rem"
      />
    </header>
    <div class="main">
      <div style="width: 94%">
        <van-tabs
          v-model="activeName"
          type="card"
          color="#1BAEAE"
          @click="change"
        >
          <van-tab title="推荐" name="a"> </van-tab>
          <van-tab title="新品" name="b"></van-tab>
          <van-tab title="价格" name="c"></van-tab>
        </van-tabs>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <van-cell v-for="item in goodsList" :key="item.goodsId">
            <router-link :to="'/Info/'+item.goodsId">
              <van-card
                num="1"
                :price="item.sellingPrice"
                desc="描述信息"
                :title="item.goodsName"
                :thumb="ic + item.goodsCoverImg"
              />
            </router-link>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getCateList } from "@/api/index";
export default {
  name: "categaryItemList",
  data() {
    return {
      value: "",
      activeName: "a",
      goodsCategoryId: "",
      keyword: "",
      orderBy: "",
      loading: false,
      finished: true,
      goodsList: [],
      ic: "http://backend-api-01.newbee.ltd/",
    };
  },
  methods: {
    get() {
      getCateList({
        pageNumber: 1,
        goodsCategoryId: 20,
        keyword: this.keyword,
        orderBy: this.orderBy,
      }).then((data) => {
        this.goodsList = data.data.list;
      });
    },
    change(name) {
      if (name === "b") {
        this.orderBy = "new";
      } else if (name === "c") {
        this.orderBy = "price";
      }
      this.get();
    },
  },
  created() {
    this.get();
  },
};
</script>
<style scoped lang="less">
header {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main {
  margin: 1.5rem 0 0 0;
}
</style>